<!--
 * @Author: dfh
 * @Date: 2024-09-23 17:40:16
 * @LastEditors: dfh
 * @Modified By: dfh
 * @describe: 
-->
<template>
    <view class="dish-wrap">
        <text class="select-btn" v-if="flavors && flavors.length > 0" @click="onFlavorClick">选择规格</text>
        <view class="flex ai-center" v-else>
            <text class="iconfont icon-jianshao txt-40" @click="numChange('minus')"
                :class="num > 0 ? 'txt-yellow-225' : 'txt-black-228'"></text>
            <text class="txt-black-50 mx-10 txt-26">{{ num }}</text>
            <text class="iconfont icon-zengjia txt-yellow-225 txt-40" @click="numChange('add')"></text>
        </view>
    </view>
</template>

<script setup>
import { effect, ref } from 'vue';
import { useCartStore } from '@/store/cart';
import { useHomeStore } from '@/store/home';


const homeStore = useHomeStore();
const cartStore = useCartStore();
const num = ref(0);
const props = defineProps({
    flavors: {
        type: Array,
        default: () => []
    },
    item: {
        type: Object,
        default: () => { }
    }
})

effect(() => {
    const cartItem = [...cartStore.cartList || []].find(item => item.id == props.item.id);
    if (cartItem != null) {
        num.value = cartItem.number;
    }

})

const numChange = async (type) => {
    if (type == 'add') {
        cartStore.addCartActive(props.item,homeStore.sitNum, 11);
    } else {
        cartStore.subCartActive(props.item,homeStore.sitNum, 11);
    }
}



const onFlavorClick = () => {
    // num.value = num.value + 1;
    homeStore.openFlavorSelect(props.item, num);
}
</script>

<style lang="scss" scoped>
.dish-wrap {
    display: flex;
    align-items: center;

    .select-btn {
        width: 128rpx;
        height: 48rpx;
        background-color: rgb(255, 194, 0);
        font-size: 18rpx;
        color: black;
        border-radius: 24rpx;
        text-align: center;
        line-height: 48rpx;
    }
}
</style>